<%--
  Created by IntelliJ IDEA.
  User: luciel
  Date: 2020/7/7
  Time: 13:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <!-- <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> -->

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!-- <script src="./node_modules/jquery/dist/jquery.min.js"></script> -->

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> --><!--
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    &lt;!&ndash; 最新的 Bootstrap 核心 JavaScript 文件 &ndash;&gt;
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/notifications/Lobibox.js"></script>-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <script src="js/vendor/jquery-1.12.4.min.js"></script>

    <script src="js/calendar/moment.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="js/data-table/bootstrap-table.js"></script>

    <script src="js/notifications/Lobibox.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>


    <title>历史消息</title>
    <style>
        html{
            height: 100%;
            margin: 0;
            padding: 0;
            font-size: 10px;
        }
        body{
            height: 100%;
        }
        .container-fluid,.container-fluid .row,.sider,.container{
            height: 100%;
        }
        .sider{
            background-color: #dddddd;
            padding: 0;
        }
        .container{
            background-color: #aaaaaa;
            padding: 4rem;
        }
        .btn{
            margin-bottom: 2rem;
        }
        .context{
            border-radius: 2rem;
            background-color: #ffffff;
            height: calc(100% - 9rem);
            padding: 2rem;
        }
        .option-list .option-item{
            list-style: none;
            background-color: #bbbbbb;
            height: 6rem;
            width: 100%;
            text-align: center;
            line-height: 6rem;
            cursor: pointer;
        }
        .option-list .option-item:hover{
            background-color: rgba(95, 95, 95, 0.2);
        }
        .option-list{
            padding: 0;
        }
        .logo{
            height: 8rem;
            width: 100%;
            background-color: #eeeeee;
            text-align: center;
            line-height: 8rem;
            font-size: 2rem;
        }


    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 sider">
            <div class="logo">历史消息</div>
            <ul id="msgList" class="option-list">
                <li class="option-item">some option</li>
                <li class="option-item">some option</li>
                <li class="option-item">some option</li>
                <li class="option-item">some option</li>
                <li class="option-item">some option</li>
                <li class="option-item">some option</li>
            </ul>
        </div>
        <div class="col-md-10 container">
            <button type="button" class="btn btn-default btn-lg"><a href="saveTinymce.jsp">发送消息</a></button>
            <button type="button" class="btn btn-default btn-lg"><a id="loadTinymce" href="#">修改消息</a> </button>
            <button><a href="userList.jsp">返回</a></button>
            <div class="context embed-responsive embed-responsive-16by9" >
                <iframe id="notifyContent"  class="embed-responsive-item">1</iframe></div>
        </div>
    </div>

</div>
</body>
<script>


    $(function () {
        $.get('http://localhost:8080/notify/getAllMsg',{},
            function (_data) {
                if (null !=_data){
                    $('#msgList').html('');
                    for (var i = 0; i <_data.length;i++)
                    {
                        $('#msgList').append('<li class="option-item" onclick="showMsg('+_data[i].id+')">'+_data[i].ntitle+'</li>')
                    }
                }
            })
    })

    function showMsg(id) {
        $.get('http://localhost:8080/notify/systemMsg/'+id,
            {},function (_data){
                //如果拥有code 说明出现错误
                if (_data.code){
                    showErrorBox("获取系统消息错误")
                }else{
                    console.log('notify:'+_data.npath);
                    $('#notifyTitle').html("标题："+_data.ntitle);
                    /* 加http:// 切记！*/
                    $('#notifyContent').attr("src","http://localhost/"+_data.npath);
                    $('#loadTinymce').attr("href","loadTinymce.jsp");
                    $('#loadTinymce').click(function(){
                        //将notify的id存在cookies中。
                        $.cookie("notifyId",_data.id);
                    });
                    //点击后直接插入数据
                    insertMVR(_data);
                }

            }
        );
    }

    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

    /**
     *  插入已读消息的uid和nid。
     */
    function insertMVR(msgData) {
        $.ajax({
            url:'http://localhost:8080/notifyView/insert',
            dataType:'json',
            type:'POST',
            data:{
                /* userId 由后端获取*/
                userId:10,
                notifyId:msgData.id,
                status:1,

            },
            success:function (_data) {
                if (_data.code>0){

                }
            }
        })
    }
</script>
</html>